{{ define "batch-upload" }}
<div class="space-y-6">
    <div id="batchUploadArea" 
         class="relative border-2 border-dashed rounded-lg p-6 transition-colors"
         :class="{ 
             'border-darkBorder hover:border-darkAccent bg-darkSurface': darkMode,
             'border-gray-300 hover:border-indigo-500 bg-gray-50': !darkMode 
         }">
        <div class="text-center space-y-4">
            <div class="space-y-2">
                <svg class="mx-auto h-12 w-12 transition-colors" 
                     :class="{ 'text-darkTextSecondary group-hover:text-darkAccent': darkMode, 'text-gray-400 group-hover:text-indigo-500': !darkMode }"
                     fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
                </svg>
                <div id="batchUploadText" class="flex flex-col items-center">
                    <label for="batchImageInput" class="relative cursor-pointer rounded-md font-medium focus-within:outline-none">
                        <span class="inline-flex items-center px-4 py-2 border text-sm rounded-full transition-colors"
                              :class="{ 
                                  'border-darkAccent text-darkAccent hover:bg-darkAccent/10': darkMode,
                                  'border-indigo-500 text-indigo-600 hover:bg-indigo-50': !darkMode 
                              }">
                            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
                            </svg>
                            选择文件
                        </span>
                    </label>
                    <p class="mt-2" :class="{ 'text-darkTextSecondary': darkMode, 'text-gray-500': !darkMode }">
                        或者将您的图片拖放到这里
                    </p>
                    <input id="batchImageInput" type="file" multiple accept="image/*,.heic,.heif" class="sr-only">
                </div>
            </div>
            <div id="batchFileList" class="hidden">
                <div class="max-h-60 overflow-y-auto space-y-2 rounded-lg p-4"
                     :class="{ 'bg-darkInput': darkMode, 'bg-gray-50': !darkMode }">
                    <!-- File items will be inserted here -->
                </div>
            </div>
        </div>
    </div>

    <div class="p-6 rounded-lg shadow space-y-6 transition-colors"
         :class="{ 'bg-darkSurface border border-darkBorder': darkMode, 'bg-white': !darkMode }">
        <h3 class="text-lg font-medium" :class="{ 'text-darkTextPrimary': darkMode, 'text-gray-900': !darkMode }">
            批量处理选项
        </h3>
        <div class="space-y-4">
            <label class="block text-sm font-medium" :class="{ 'text-darkTextPrimary': darkMode, 'text-gray-700': !darkMode }">
                处理模式
            </label>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <label class="relative flex cursor-pointer rounded-lg border p-4 shadow-sm focus:outline-none"
                       :class="{ 
                           'bg-darkInput border-darkBorder hover:bg-darkInputHover': darkMode && processingMode !== 'individual',
                           'bg-darkInputFocus border-darkAccent': darkMode && processingMode === 'individual',
                           'bg-white border-gray-200': !darkMode && processingMode !== 'individual',
                           'bg-white border-indigo-600': !darkMode && processingMode === 'individual'
                       }">
                    <input type="radio" name="processing-mode" value="individual" class="sr-only" checked
                           @change="processingMode = 'individual'">
                    <div class="flex flex-1">
                        <div class="flex flex-col">
                            <span class="block text-sm font-medium" 
                                  :class="{ 
                                      'text-darkTextPrimary': darkMode && processingMode !== 'individual',
                                      'text-darkAccent': darkMode && processingMode === 'individual',
                                      'text-gray-900': !darkMode && processingMode !== 'individual',
                                      'text-indigo-900': !darkMode && processingMode === 'individual'
                                  }">
                                逐个处理
                            </span>
                            <span class="mt-1 flex items-center text-sm" 
                                  :class="{ 
                                      'text-darkTextSecondary': darkMode && processingMode !== 'individual',
                                      'text-darkAccent': darkMode && processingMode === 'individual',
                                      'text-gray-500': !darkMode && processingMode !== 'individual',
                                      'text-indigo-500': !darkMode && processingMode === 'individual'
                                  }">
                                分别处理每张图像
                            </span>
                        </div>
                    </div>
                    <svg class="h-5 w-5" 
                         :class="{ 'text-indigo-600': processingMode === 'individual', 'text-gray-400': processingMode !== 'individual' }" 
                         viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                        <circle cx="10" cy="10" r="5"/>
                    </svg>
                    <span class="pointer-events-none absolute -inset-px rounded-lg border-2" 
                          :class="{ 'border-indigo-600': processingMode === 'individual', 'border-transparent': processingMode !== 'individual' }" 
                          aria-hidden="true"></span>
                </label>

                <label class="relative flex cursor-pointer rounded-lg border p-4 shadow-sm focus:outline-none"
                       :class="{ 
                           'bg-darkInput border-darkBorder hover:bg-darkInputHover': darkMode && processingMode !== 'merge-pdf',
                           'bg-darkInputFocus border-darkAccent': darkMode && processingMode === 'merge-pdf',
                           'bg-white border-gray-200': !darkMode && processingMode !== 'merge-pdf',
                           'bg-white border-indigo-600': !darkMode && processingMode === 'merge-pdf'
                       }">
                    <input type="radio" name="processing-mode" value="merge-pdf" class="sr-only"
                           @change="processingMode = 'merge-pdf'">
                    <div class="flex flex-1">
                        <div class="flex flex-col">
                            <span class="block text-sm font-medium" 
                                  :class="{ 
                                      'text-darkTextPrimary': darkMode && processingMode !== 'merge-pdf',
                                      'text-darkAccent': darkMode && processingMode === 'merge-pdf',
                                      'text-gray-900': !darkMode && processingMode !== 'merge-pdf',
                                      'text-indigo-900': !darkMode && processingMode === 'merge-pdf'
                                  }">
                                合并为PDF
                            </span>
                            <span class="mt-1 flex items-center text-sm" 
                                  :class="{ 
                                      'text-darkTextSecondary': darkMode && processingMode !== 'merge-pdf',
                                      'text-darkAccent': darkMode && processingMode === 'merge-pdf',
                                      'text-gray-500': !darkMode && processingMode !== 'merge-pdf',
                                      'text-indigo-500': !darkMode && processingMode === 'merge-pdf'
                                  }">
                                将所有图像合并为一个PDF文件
                            </span>
                        </div>
                    </div>
                    <svg class="h-5 w-5" 
                         :class="{ 'text-indigo-600': processingMode === 'merge-pdf', 'text-gray-400': processingMode !== 'merge-pdf' }" 
                         viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                        <circle cx="10" cy="10" r="5"/>
                    </svg>
                    <span class="pointer-events-none absolute -inset-px rounded-lg border-2" 
                          :class="{ 'border-indigo-600': processingMode === 'merge-pdf', 'border-transparent': processingMode !== 'merge-pdf' }" 
                          aria-hidden="true"></span>
                </label>
            </div>
        </div>

        <div x-show="processingMode === 'individual'" class="space-y-4">
            <div class="group cursor-pointer">
                <label for="batchFormatSelect" class="block text-sm font-medium mb-1 cursor-pointer"
                       :class="{ 'text-darkTextPrimary': darkMode, 'text-gray-700': !darkMode }">
                    <span class="flex items-center gap-1">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
                        </svg>
                        输出格式
                    </span>
                </label>
                <div class="relative">
                    <select id="batchFormatSelect" name="format" 
                            class="appearance-none cursor-pointer mt-1 block w-full pl-3 pr-10 py-2 text-base rounded-md transition-colors"
                            :class="{ 
                                'bg-darkInput border-darkBorder text-darkTextPrimary hover:bg-darkInputHover hover:border-darkAccent focus:bg-darkInputFocus focus:border-darkAccent focus:ring-1 focus:ring-darkAccent': darkMode,
                                'bg-white border-gray-300 hover:border-indigo-300 focus:ring-indigo-500 focus:border-indigo-500': !darkMode 
                            }">
                        <optgroup label="图像格式">
                            <option value="jpeg">JPEG - 最适用于照片</option>
                            <option value="png">PNG - 最适用于图形</option>
                            <option value="webp">WebP - 现代网页格式</option>
                            <option value="gif">GIF - 简单动画</option>
                            <option value="bmp">BMP - 一种基本图像格式</option>
                            <option value="heic">HEIC - 高效图像文件格式</option>
                        </optgroup>
                        <optgroup label="文档格式">
                            <option value="pdf">PDF - 可移植文档格式</option>
                        </optgroup>
                    </select>
                    <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-500">
                        <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                        </svg>
                    </div>
                </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div class="relative group">
                    <label for="batchWidthInput" class="block text-sm font-medium mb-1"
                           :class="{ 'text-darkTextPrimary': darkMode, 'text-gray-700': !darkMode }">
                        宽度
                    </label>
                    <input type="number" 
                           id="batchWidthInput" 
                           name="width" 
                           min="1" 
                           max="8192" 
                           placeholder="宽度 (px)"
                           class="mt-1 block w-full pl-3 pr-10 py-2 rounded-md transition-colors"
                           :class="{ 
                               'bg-darkInput border-darkBorder text-darkTextPrimary placeholder-darkTextSecondary hover:bg-darkInputHover hover:border-darkAccent focus:bg-darkInputFocus focus:border-darkAccent focus:ring-1 focus:ring-darkAccent': darkMode,
                               'bg-white border-gray-300 hover:border-indigo-300 focus:ring-indigo-500 focus:border-indigo-500': !darkMode 
                           }">
                </div>
                <div class="relative group">
                    <label for="batchHeightInput" class="block text-sm font-medium mb-1"
                           :class="{ 'text-darkTextPrimary': darkMode, 'text-gray-700': !darkMode }">
                        高度
                    </label>
                    <input type="number" 
                           id="batchHeightInput" 
                           name="height" 
                           min="1" 
                           max="8192" 
                           placeholder="高度 (px)"
                           class="mt-1 block w-full pl-3 pr-10 py-2 rounded-md transition-colors"
                           :class="{ 
                               'bg-darkInput border-darkBorder text-darkTextPrimary placeholder-darkTextSecondary hover:bg-darkInputHover hover:border-darkAccent focus:bg-darkInputFocus focus:border-darkAccent focus:ring-1 focus:ring-darkAccent': darkMode,
                               'bg-white border-gray-300 hover:border-indigo-300 focus:ring-indigo-500 focus:border-indigo-500': !darkMode 
                           }">
                </div>
            </div>
        </div>

        <div x-show="processingMode === 'merge-pdf'" class="space-y-4">
            <div class="p-4 rounded-lg space-y-4"
                 :class="{ 'bg-darkInput': darkMode, 'bg-gray-50': !darkMode }">
                <div class="flex items-center justify-between">
                    <h4 class="text-sm font-medium" :class="{ 'text-darkTextPrimary': darkMode, 'text-gray-900': !darkMode }">
                        PDF 选项
                    </h4>
                </div>
                
                <div>
                    <label for="pdfPageSize" class="block text-sm font-medium" :class="{ 'text-darkTextPrimary': darkMode, 'text-gray-700': !darkMode }">
                        页面大小
                    </label>
                    <select id="pdfPageSize" name="pageSize" 
                            class="mt-1 block w-full pl-3 pr-10 py-2 text-base rounded-md transition-colors cursor-pointer"
                            :class="{ 
                                'bg-darkInput border-darkBorder text-darkTextPrimary hover:bg-darkInputHover hover:border-darkAccent focus:bg-darkInputFocus focus:border-darkAccent focus:ring-1 focus:ring-darkAccent': darkMode,
                                'bg-white border-gray-300 hover:border-indigo-300 focus:ring-indigo-500 focus:border-indigo-500': !darkMode 
                            }">
                        <option value="A4">A4 (210 × 297 毫米)</option>
                        <option value="letter">信纸尺寸 (8.5 × 11 英寸)</option>
                        <option value="legal">法律文书尺寸 (8.5 × 14 英寸)</option>
                    </select>
                </div>

                <div>
                    <label for="pdfOrientation" class="block text-sm font-medium" :class="{ 'text-darkTextPrimary': darkMode, 'text-gray-700': !darkMode }">
                        页面方向
                    </label>
                    <select id="pdfOrientation" name="orientation" 
                            class="mt-1 block w-full pl-3 pr-10 py-2 text-base rounded-md transition-colors cursor-pointer"
                            :class="{ 
                                'bg-darkInput border-darkBorder text-darkTextPrimary hover:bg-darkInputHover hover:border-darkAccent focus:bg-darkInputFocus focus:border-darkAccent focus:ring-1 focus:ring-darkAccent': darkMode,
                                'bg-white border-gray-300 hover:border-indigo-300 focus:ring-indigo-500 focus:border-indigo-500': !darkMode 
                            }">
                        <option value="auto">自动 (基于图像)</option>
                        <option value="portrait">竖版</option>
                        <option value="landscape">横向</option>
                    </select>
                </div>

                <div>
                    <label for="imagesPerPage" class="block text-sm font-medium cursor-pointer" :class="{ 'text-darkTextPrimary': darkMode, 'text-gray-700': !darkMode }">
                        每页图像数量
                    </label>
                    <select id="imagesPerPage" name="imagesPerPage" 
                            class="mt-1 block w-full pl-3 pr-10 py-2 text-base rounded-md transition-colors cursor-pointer"
                            :class="{ 
                                'bg-darkInput border-darkBorder text-darkTextPrimary hover:bg-darkInputHover hover:border-darkAccent focus:bg-darkInputFocus focus:border-darkAccent focus:ring-1 focus:ring-darkAccent': darkMode,
                                'bg-white border-gray-300 hover:border-indigo-300 focus:ring-indigo-500 focus:border-indigo-500': !darkMode 
                            }">
                        <option value="1">1 张图片/每页</option>
                        <option value="2">2 张图片/每页</option>
                        <option value="4">4 张图片/每页</option>
                    </select>
                </div>
            </div>
        </div>
    </div>

    <button id="batchProcessBtn" type="button" disabled 
            class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
            :class="{ 
                'text-darkTextPrimary bg-darkAccent hover:bg-darkAccentHover focus:ring-darkAccent': darkMode,
                'text-white bg-indigo-600 hover:bg-indigo-700 focus:ring-indigo-500': !darkMode 
            }">
        <span x-text="processingMode === 'merge-pdf' ? '创建 PDF' : '处理图像'"></span>
    </button>

    <div id="batchProgress" class="hidden space-y-4">
        <div class="p-4 rounded-lg shadow transition-colors"
             :class="{ 'bg-darkSurface border border-darkBorder': darkMode, 'bg-white': !darkMode }">
            <div class="flex items-center justify-between mb-2">
                <span class="text-sm font-medium" 
                      :class="{ 'text-darkTextPrimary': darkMode, 'text-gray-700': !darkMode }">
                    处理进度
                </span>
                <span id="batchProgressCount" class="text-sm" :class="{ 'text-darkTextSecondary': darkMode, 'text-gray-500': !darkMode }">
                    0/0 文件
                </span>
            </div>
            <div class="w-full rounded-full h-2" 
                 :class="{ 'bg-darkInput': darkMode, 'bg-gray-200': !darkMode }">
                <div id="batchProgressBar" class="h-2 rounded-full transition-all duration-300" 
                     :class="{ 'bg-darkAccent': darkMode, 'bg-indigo-600': !darkMode }"
                     style="width: 0%">
                </div>
            </div>
        </div>
    </div>
</div>
{{ end }}